<template>
    <div id="myChart" :style="{width: '800px', height: '600px'}"></div>
</template>
<script>

    import axios from 'axios'
    export default {
        name: 'Echarts',
        mounted(){
            let _this=this
            axios.get('http://localhost:8888/compare/view').then(function (response) {
                // 基于准备好的dom，初始化echarts实例
                let myChart = _this.$echarts.init(document.getElementById('myChart'))
                // 绘制图表
                myChart.setOption({

                    title: {
                        text: '作者播放量前十对比',
                        subtext: '生活区作者/搞笑区作者'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        data: ['生活区', '搞笑区']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    yAxis: {
                        type: 'category',
                        // data: ['一只小黄书/笑起来没眼睛的播音生', '印尼', '美国', '印度', '中国', '世界人口(万)']
                        data: response.data.authorList
                    },
                    series: [
                        {
                            name: '生活区',
                            type: 'bar',
                            // data: ["118203", 23489, 29034, 104970, 131744, 630230]
                            data: response.data.numList2
                        },
                        {
                            name: '搞笑区',
                            type: 'bar',
                            // data: [119325, 23438, 31000, 121594, 134141, 681807]
                            data: response.data.numList1
                        }
                    ]
                });
            })

        }
    }
</script>